<template>
  <div>
    <el-card style="margin:40px" v-loading="loading">
      <tree :treeNode="company" :isRoot="true" @addDepart="addDepartment" @editDepart="editDepartment"></tree>
      <el-row style="margin-top: 20px">
        <el-tree :data="departs" :props="defaultProps">
          <!-- 传插槽的数据，每行的数据，把每行的数据通过props传到子组件中 -->
          <tree
            slot-scope="{ data }"
            :treeNode="data"
            @deleteDepart="deleteDepartment"
            @addDepart="addDepartment"
            @editDepart="editDepartment"
          ></tree>
        </el-tree>
      </el-row>
      <addDepart :dialogFormVisible.sync="dialogFormVisible" :treeNode="treeNode" @getDepart="GetDepartments" ref="edit"></addDepart>
    </el-card>
  </div>
</template>

<script>
// 引入api
import { getDepartments, delDepartments,addDepartments } from "@/api/departments";
export default {
  name: "departments",
  data() {
    return {
      dialogFormVisible:false,
      loading:false,
      company: {
        name: "江苏传智播客教育科技股份有限公司",
        manager: "负责人",

        id:"",
      },
      defaultProps: {
        label: "name",
      },
      departs: [],
      treeNode:{},
    };
  },
  // 数据完成解析，dom还没渲染
  created() {
    this.GetDepartments();
  },
  methods: {
    async GetDepartments() {
      this.loading = true;
      const result = await getDepartments();
      // if (result.depts.length > 0) {
      this.departs = result.depts.filter((item) => {
        return item.pid != "-1";
      });
      this.departs = this.formatDeparts(this.departs, "");
      console.log(result.depts);
      this.loading = false;
    },
    // 递归找到属于每个部门的员工
    formatDeparts(depart, rootValue) {
      let arr = [];
      depart.forEach((item) => {
        if (item.pid === rootValue) {
          // 找到之后 就要去找 item 下面有没有子节点
          const children = this.formatDeparts(depart, item.id);
          if (children.length) {
            // 如果children的长度大于0 说明找到了子节点
            item.children = children;
          }
          arr.push(item); // 将内容加入到数组中
        }
      });
      return arr;
    },
    // 删除部门
    deleteDepartment(id) {
      this.$confirm("确认删除该部门吗？", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确认删除",
        cancelButtonText: "取消",
      })
        .then(async () => {
          const result = await delDepartments(id);
          // 删除成功后再次调用获取部门
          this.GetDepartments();
          this.$message({
            type: "success",
            message: "成功删除！",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "删除失败",
          });
        });
    },
    // 点击新增，触发的事件
    addDepartment(treeNode){
      this.dialogFormVisible = true;
      this.treeNode = treeNode;
    },
    // 点击编辑，触发的事件
    editDepartment(treeNode){
      this.dialogFormVisible = true;
      this.treeNode = treeNode;
      // console.log(this.treeNode);
      // console.log(this.$refs.edit);
      this.$refs.edit.editDepart(this.treeNode.id);
      
    }
  },
};
</script>

<style>
</style>